<!--用户管理-名片管理 -->
<template>
  <div class="pad">
    <div class="head">
      <span>名片管理</span>
    </div>
    <div style="display: flex;" class="m-t-b">
      <el-input
        v-model="searchText"
        :placeholder="`输入${searchType === 1 ? '用户编号' : '用户昵称'}搜索`"
        @input="clearSearch"
        @keypress.native.enter="handleSearch"
        clearable
      >
        <el-select
          style="width: 120px;"
          slot="prepend"
          v-model="searchType"
        >
          <el-option :value="1" label="用户编号"></el-option>
          <el-option :value="2" label="用户昵称"></el-option>
        </el-select>
      </el-input>
      <el-button
        type="primary"
        style="margin-left: 15px;"
        @click="handleSearch"
        :loading="loading"
      >
        <i class="el-icon-search"></i>
        搜索
      </el-button>
    </div>
    <el-table :data="cardList" border stripe class="m-t-b" v-loading="loading">
      <el-table-column label="用户微信昵称" prop="wnickname"></el-table-column>
      <el-table-column label="名片昵称" prop="nickname"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="邮箱" prop="userEmail"></el-table-column>
      <el-table-column label="公司名称" prop="enterpriseName"></el-table-column>
      <el-table-column label="公司办公地址" prop="businessAddress"></el-table-column>
      <el-table-column label="公司简介" prop="company"></el-table-column>
      <el-table-column label="创建时间" prop="createDate"></el-table-column>
      <el-table-column label="更新时间" prop="updateDate"></el-table-column>
      <el-table-column label="审核状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.auditStatus == 1">审核通过</el-tag>
          <el-tag type="info" v-if="scope.row.auditStatus == 0">待审核</el-tag>
          <el-tag type="danger" v-if="scope.row.auditStatus == 2">审核失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-switch
            :disabled="scope.row.auditStatus != 1"
            active-text="启用"
            inactive-text="禁用"
            v-model="scope.row.enable"
            @change="changeShowStatus(scope.row, $event)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-popover
            v-if="scope.row.auditStatus == '0'"
            placement="bottom"
            trigger="click"
          >
            <div>
              <el-button type="primary" @click="changeAuthority(scope.row, 1)">通过审核</el-button>
              <el-button type="danger" @click="changeAuthority(scope.row, 2)">驳回审核</el-button>
            </div>
            <el-button
              slot="reference"
              type="primary"
              circle
              icon="el-icon-s-check"
            ></el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex m-t-b"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="handlePagi"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import {
  getBusinessCardByPage,
  changeCardStatus,
  setCardAuthority
} from '../api/version2';
import { formatDate } from '../util';
export default {
  name: 'BusinessCard',
  data () {
    return {
      total: 0,
      pageSize: 10,
      loading: true,
      cardList: [],
      searchType: 2,
      searchText: ''
    }
  },
  methods: {
    fetchBusinessCardList (index) { // 分页查询名片
      this.loading = true;
      getBusinessCardByPage({
        index,
        count: this.pageSize,
        queryParam: {
          userId: this.searchType === 1 ? (this.searchText || null) : null,
          wnickname: this.searchType === 1 ? null : (this.searchText || null)
        }
      })
      .then(res => {
        this.loading = false;
        let list = res.data.data.list || [];
        list.forEach(item => {
          item.enable = Boolean(item.visitingCardStatus);
          item.createDate = formatDate(item.createDate, 'zh:');
          item.updateDate = formatDate(item.updateDate, 'zh:')
        });
        this.total = res.data.data.totalRecord;
        this.cardList = list

      })
      .catch(e => {
        this.loading = false
      })
    },
    changeShowStatus (data, e) { // 改变启用/禁用状态
       if (!this.$checkAuth('isUseCard')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.$confirm(`确定 ${e ? '启用' : '禁用'} 该名片吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(r => {
        setCardAuthority({
          visitingCardId: data.visitingCardId,
          visitingCardStatus: Number(e)
        })
        .then(res => {
          this.$message.success('操作成功');
          this.fetchBusinessCardList(1)
        })
        .catch(e => {

        })
      })
      .catch(err => {
        data.enable = !e
      })
    },
    changeAuthority (data, type) { // 改变审核状态
       if (!this.$checkAuth('changeStatus')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.$confirm(`确定 ${type == '1' ? '通过' : '驳回'} ${data.wnickname} 的名片发布申请吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(res => {
        changeCardStatus({
          visitingCardId: data.visitingCardId,
          auditStatus: type
        })
        .then(res => {
          this.$message.success('操作成功');
          this.fetchBusinessCardList(1)
        })
        .catch(e => {

        })
      })
      .catch(e => {

      })
    },
    handlePagi (page) { // 分页事件
      this.fetchBusinessCardList(page)
    },
    handleSearch () { // 搜索

       if (!this.$checkAuth('searchCard')) {
        return this.$message.error('暂无对应操作权限!')
      };
      if (!this.searchText.trim()) {
        return this.$message.error('请输入有效搜索内容')
      };
      this.fetchBusinessCardList(1)
    },
    clearSearch () { // 清除搜索
      if (!this.searchText.trim()) {
        this.fetchBusinessCardList(1)
      }
    }
  },
  created () {
    this.fetchBusinessCardList(1)
  }
}
</script>
<style lang="scss">

</style>
